<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线工具集</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">在线工具集</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link" href="#file-convert">文件转化</a></li>
                    <li class="nav-item"><a class="nav-link" href="#image-compress">图片压缩</a></li>
                    <li class="nav-item"><a class="nav-link" href="#image-crop">图片裁剪</a></li>
                    <li class="nav-item"><a class="nav-link" href="#image-convert">图片格式转化</a></li>
                    <li class="nav-item"><a class="nav-link" href="#image-watermark">图片水印</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主页面内容 -->
    <div class="container mt-4">
        <h1 class="text-center">在线工具集</h1>
        <p class="text-center text-muted">简单、高效、实用的在线工具</p>
        
        <!-- 工具卡片网格 -->
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card tool-card">
                    <div class="card-body">
                        <h5 class="card-title">文件转化</h5>
                        <p class="card-text">支持多种文件格式转换</p>
                        <a href="#file-convert" class="btn btn-primary">开始使用</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card tool-card">
                    <div class="card-body">
                        <h5 class="card-title">图片压缩</h5>
                        <p class="card-text">高效压缩图片大小</p>
                        <a href="#image-compress" class="btn btn-primary">开始使用</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card tool-card">
                    <div class="card-body">
                        <h5 class="card-title">图片裁剪</h5>
                        <p class="card-text">精确裁剪图片区域</p>
                        <a href="#image-crop" class="btn btn-primary">开始使用</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card tool-card">
                    <div class="card-body">
                        <h5 class="card-title">图片格式转化</h5>
                        <p class="card-text">转换图片格式</p>
                        <a href="#image-convert" class="btn btn-primary">开始使用</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card tool-card">
                    <div class="card-body">
                        <h5 class="card-title">图片水印</h5>
                        <p class="card-text">添加文字水印</p>
                        <a href="#image-watermark" class="btn btn-primary">开始使用</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 文件转化工具 -->
        <div id="file-convert" class="tool-section">
            <h2>文件转化工具</h2>
            <div class="upload-area" id="file-upload-area">
                <p>拖放文件到此处或点击上传</p>
                <input type="file" id="file-input" class="d-none">
            </div>
            <div class="mt-3">
                <select class="form-select" id="target-format">
                    <option value="pdf">PDF</option>
                    <option value="doc">DOC</option>
                    <option value="txt">TXT</option>
                </select>
                <button class="btn btn-primary mt-2" id="convert-btn">开始转化</button>
            </div>
            <div id="convert-result" class="mt-4 d-none">
                <div class="alert alert-success">
                    <h5>转换成功！</h5>
                    <div class="mt-3">
                        <a id="download-btn" href="#" class="btn btn-primary">下载文件</a>
                    </div>
                </div>
            </div>
            <div id="error-message" class="alert alert-danger mt-4 d-none"></div>
        </div>

        <!-- 图片压缩工具 -->
        <div id="image-compress" class="tool-section">
            <h2>图片压缩工具</h2>
            <div class="preview-container">
                <div class="preview-box">
                    <h4>原图</h4>
                    <img id="original-image" class="preview-image">
                </div>
                <div class="preview-box">
                    <h4>压缩后</h4>
                    <img id="compressed-image" class="preview-image">
                </div>
            </div>
            <div class="mt-3">
                <label>压缩质量：</label>
                <input type="range" class="form-range" id="quality-slider" min="0" max="100" value="75">
                <span id="quality-value">75%</span>
                <button class="btn btn-primary mt-2" id="compress-btn">开始压缩</button>
            </div>
        </div>

        <!-- 其他工具部分类似，这里省略 -->
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html> 